import {
	Table,
	Card,
	Button,
	Form,
	Input,
	Select,
	Space,
	TableColumnsType,
} from 'antd'
import { useState } from 'react'
type LayoutType = Parameters<typeof Form>[0]['layout']
const { Option } = Select

const layout = {
	labelCol: { span: 8 },
	wrapperCol: { span: 16 },
	inline: true,
}

interface DataType {
	key: React.Key
	name: string
	age: number
	address: string
}
const columns: TableColumnsType<DataType> = [
	{
		title: 'Name',
		dataIndex: 'name',
	},
	{
		title: 'Age',
		dataIndex: 'age',
	},
	{
		title: 'Address',
		dataIndex: 'address',
	},
]

const data: DataType[] = []
for (let i = 0; i < 46; i++) {
	data.push({
		key: i,
		name: `Edward King ${i}`,
		age: 32,
		address: `London, Park Lane no. ${i}`,
	})
}

const tailLayout = {
	wrapperCol: { offset: 4, span: 16 },
	inline: true,
}
const ListInfo: React.FC = () => {
	const [form] = Form.useForm()
	const [formLayout] = useState<LayoutType>('inline')
	const onFinish = (values: any) => {
		console.log(values)
	}

	const onReset = () => {
		form.resetFields()
	}
	const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])

	const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
		console.log('selectedRowKeys changed: ', newSelectedRowKeys)
		setSelectedRowKeys(newSelectedRowKeys)
	}

	const rowSelection = {
		selectedRowKeys,
		onChange: onSelectChange,
	}

	return (
		<div>
			<Card>
				<Form layout={formLayout} form={form} onFinish={onFinish}>
					<Form.Item name='name' label='Name'>
						<Input />
					</Form.Item>
					<Form.Item name='post' label='post'>
						<Select allowClear placeholder={'请选择'}>
							<Option value='male'>male</Option>
							<Option value='female'>female</Option>
							<Option value='other'>other</Option>
						</Select>
					</Form.Item>
					<Form.Item {...tailLayout}>
						<Space>
							<Button type='primary' htmlType='submit'>
								Submit
							</Button>
							<Button htmlType='button' onClick={onReset}>
								Reset
							</Button>
						</Space>
					</Form.Item>
				</Form>
			</Card>
			<Card>
				<Table
					rowSelection={rowSelection}
					columns={columns}
					dataSource={data}
				/>
			</Card>
		</div>
	)
}
export default ListInfo
